import React, { useEffect, useState } from "react";
import { Drawer } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import SubMenu from "@/layouts/components/SubMenu2";
import Robert from "@/layouts/components/Robert";
import { api } from "../../api/index.ts";
import logo from "@/assets/images/logo@.svg";
import gq from "@/assets/images/gq.png";
import gq_selected from "@/assets/images/gq_selected.png";
import "./index.less";
// import { handleSubNavigate } from "@/utils/index.ts";

const LayoutMenu: React.FC = () => {
  const [menuList, setMenuList] = useState<any[]>([]);
  const [activeId, setActiveId] = useState("");
  const [drawerData, setDrawerData] = useState<any>({});
  const navigate = useNavigate();
  const location = useLocation();
  const [abbreviate, setAbbreviate] = useState(false);

  useEffect(() => {
    const getMenuList = async () => {
      await api.treeData().then((res: { data: React.SetStateAction<any[]> }) => {
        setMenuList(res.data);
      });
    };
    getMenuList();
  }, []);

  // 获取菜单展开收起
  const updateIsShow = (newValue: boolean | ((prevState: boolean) => boolean)) => {
    setAbbreviate(newValue);
  };
  // 菜单点击
  function handleMenuClick(item: any) {
    onDrawerClose();
    setActiveId(item.id);
    if (item.children.length > 0) {
      setDrawerData({ ...drawerData, open: true, data: item.children });
    } else {
      navigate(item.path);
    }
  }
  const onDrawerClose = () => {
    setDrawerData({ open: false, data: [] });
  };
  return (
    <div>
      <div className="menu">
        <div className="logo">
          <img src={logo} alt="logo" className="logo-img" />
        </div>
        <div className="layout-menu">
          {menuList?.map((item, index) => {
            return (
              <div
                className={`layout-menu-item ${item.path === location.pathname ? "layout-menu-item-selected " : ""}${index === menuList.length - 1 ? "work-tab" : ""}`}
                key={index}
                onClick={handleMenuClick.bind(this, item)}
              >
                <img src={item.path === location.pathname ? gq_selected : gq} alt="logo" className="menu-img" />
                <div>{item.fullName}</div>
              </div>
            );
          })}
        </div>
        <Robert />
      </div>
      <Drawer
        placement="left"
        closable={false}
        onClose={onDrawerClose}
        open={drawerData.open}
        rootClassName="sub-menu"
        maskClassName="sub-menu-mask"
        rootStyle={{ left: 80 }}
        width={abbreviate ? 168 : 416}
        styles={{ body: { padding: 0 } }}
      >
        {drawerData.open ? <SubMenu menuData={drawerData.data} subId={activeId} sendAbbreviate={updateIsShow} /> : ""}
      </Drawer>
    </div>
  );
};

export default LayoutMenu;
